<template>
  <div class="all">
    <div class="inner">
      <h3>开辟新项目</h3>
      <label
        >项目名称&nbsp;&nbsp;&nbsp;&nbsp;:
        <el-input
          class="input_info"
          v-model="Item_name"
          placeholder="请输入项目名称(不多于12字)"
          clearable
      /></label>
      <label
        >组织名称&nbsp;&nbsp;&nbsp;&nbsp;:
        <el-input
          class="input_info"
          v-model="org_name"
          placeholder="请输入组织名称"
          clearable
      /></label>
      <label
        >组织地址&nbsp;&nbsp;&nbsp;&nbsp;:
        <el-input
          class="input_info"
          v-model="org_addr"
          placeholder="请输入组织地址"
          clearable
      /></label>
      <label
        >项目简介&nbsp;&nbsp;&nbsp;&nbsp;:
        <el-input
          v-model="textarea"
          :rows="2"
          class="input_info"
          type="textarea"
          placeholder="请输入项目简介(不多于150字)"
      /></label>
      <el-button class="btn" @click="createdItem" type="primary" round
        >创建</el-button
      >
      <div v-if="isShow" class="win">创建成功,请添加自己的小组成员吧!</div>
    </div>
  </div>
</template>

<script>
import { onMounted, onUnmounted, ref } from "vue";
import { useStore } from "vuex";
import { nanoid } from "nanoid";
import axios from "axios";
export default {
  name: "OpenNew",
  setup() {
    const textarea = ref("");
    const Item_name = ref("");
    const org_name = ref("");
    const org_addr = ref("");
    const store = useStore();
    const isShow = ref(false);
    // m => 操控节流函数
    var m = contorl();

    onMounted(() => {
      if (store.state.real_Item == "") {
        let data = JSON.parse(sessionStorage.getItem("cloud"));
         store.commit('useSessionStorage',[data.ItemID,data.DemandList,data.ItemList,data.main_person,data.real_Item,data.usernow,data.real_Demand])
      }
    });

    // 设置节流函数来控制
    function throttle(fn, delay) {
      //记录上一次函数触发的时间
      var lastTime = 0;
      return function () {
        //记录当前函数触发的时间
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          //修正this指向问题
          // fn.call(this);
          fn();
          //同步执行结束时间
          lastTime = nowTime;
        }
      };
    }

    function uploadItem() {
      axios({
        method: "post",
        url: "https://qcjk2s.api.cloudendpoint.cn/createItem",
        data: {
          name: Item_name.value,
          id: nanoid(),
          main_person: store.state.usernow.name,
          info: textarea.value,
          org_name: org_name.value,
          org_addr: org_addr.value,
        },
      }).then(
        (res) => {
          isShow.value = true;
          // begin
          axios({
            method: "post",
            url: "https://qcjk2s.api.cloudendpoint.cn/hello",
            data: {
              name: store.state.usernow.username,
              password: store.state.usernow.password,
            },
          }).then(
            (res) => {
              let data = res.data;
              if (data === -1) return alert("用户名或密码错误");
              store.commit('UpdateState',[data.user[0],data.item,data.demand,data.user[0].lastItemID])
            },
            (err) => {
              console.log(err.message);
            }
          );
          // end
        },
        (err) => {
          console.log(err.message);
        }
      );
    }
    function createdItem() {
      if (Item_name.value.length > 12 || textarea.value.length > 150) {
        return alert("请限制项目名称和项目简介的字数");
      }
      if (
        !textarea.value ||
        !Item_name.value ||
        !org_name.value ||
        !org_addr.value
      ) {
        return alert("请将信息补充完善");
      }
      m()
    }

    function contorl() {
      return throttle(uploadItem, 10000);
    }
    return {
      textarea,
      Item_name,
      org_name,
      org_addr,
      isShow,
      createdItem,
      throttle,
    };
  },
};
</script>

<style lang="less" scoped>
.all {
  height: 100%;
  width: 99.9%;
  display: flex;
  justify-content: center;
  align-items: center;
  .inner {
    width: 70%;
    height: 70%;
    color: #409efc;
    h3 {
      margin-bottom: 3%;
    }
    label {
      display: block;
      margin-bottom: 3%;
      .input_info {
        width: 50%;
      }
    }
    .btn {
      width: 35%;
    }
    .win {
      margin-top: 2%;
      color: red;
    }
  }
}
</style>